/*
  学习目标：性能优化-
*/
import React from 'react';

export default class App extends React.Component {
  state = {
    list: [1, 2, 3],
  };

  handleClick = () => {
    // ✅ 使用新值覆盖旧值
    this.setState({ list: [...this.state.list, 4] });

    // ❌ 这会导致list的内存地址一直都没有变化
    // this.state.list.push(4);
    // this.setState(this.state); // {list: [1, 2, 3, 4]}
  };
  render() {
    const { list } = this.state;
    return (
      <div>
        <button onClick={this.handleClick}>点我修改list</button>
        <Child list={list}></Child>
      </div>
    );
  }
}

class Child extends React.PureComponent {
  render() {
    console.log('我被更新了  ----->  ');
    return <h1>Child</h1>;
  }
}
